<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" xmlns:p="http://primefaces.org/ui" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:jx="http://ar.com.jendrix/jsf" template="/#{initParam['jendrix.bootstrap.theme']}/pages/template.xhtml">

	<ui:define name="body">

		<h:form id="formMain">

			<p:messages id="messages" showDetail="true" autoUpdate="false" closable="true" />
			<p:growl id="growl" showDetail="true" sticky="true" autoUpdate="false" />

			<div class="row">
				<div class="col-md-12">
					<!--breadcrumbs start -->
					<ul class="breadcrumb">
						<li><a href="home.xhtml"><i class="fa fa-home"></i> Home </a></li>
						<li class="active">Roles</li>
					</ul>
				</div>
			</div>

			<section class="panel panel-default"> <header class="panel-heading panel-heading-ext">Filtro<span class="tools pull-right"> <a
				href="javascript:;" class="fa fa-chevron-down"></a> <a href="javascript:;" class="fa fa-cog"></a> <a href="javascript:;" class="fa fa-times"></a>
			</span> </header>
			<div class="panel-body">
				<p:outputPanel id="outputPanelQuery">

					<div class="col-md-1 control-label">
						<label class="col-lg-1 col-sm-1 control-label">Nombre</label>
					</div>
					<div class="col-md-3">
						<h:inputText maxlength="50" size="50" value="#{rolBean.query.nombre}" class="form-control" style="text-transform: uppercase"
							onblur="this.value=this.value.toUpperCase();" />
					</div>
					<div class="col-md-1">
						<p:commandLink id="link_eliminar" actionListener="#{rolBean.search}" update="entityListDT, messages" styleClass="btn btn-default btn-primary">
							<h:graphicImage value="../resources/images/actions/remove.png" /> Buscar
						</p:commandLink>
					</div>
				</p:outputPanel>
			</div>
			</section>

			<section class="panel panel-default"> <header class="panel-heading panel-heading-ext">Roles<span class="tools pull-right"> <a
				href="javascript:;" class="fa fa-chevron-down"></a> <a href="javascript:;" class="fa fa-cog"></a> <a href="javascript:;" class="fa fa-times"></a>
			</span> </header>
			<div class="panel-body">
				<p:outputPanel id="outputPanelDataTable">
					<p:dataTable id="entityListDT" value="#{rolBean.entityList}" var="entity" rows="10" paginator="true" paginatorPosition="bottom">
						<p:column sortBy="#{entity.id}" styleClass="ui-column-id" width="10%">
							<f:facet name="header">
								<h:outputText value="#" />
							</f:facet>
							<h:outputText value="#{entity.id}" />
						</p:column>
						<p:column sortBy="#{entity.aplicacionDTO.aplicacion.descripcion}" width="20%">
							<f:facet name="header">
								<h:outputText value="Aplicacion" />
							</f:facet>
							<h:outputText value="#{entity.aplicacionDTO.aplicacion.descripcion}" />
						</p:column>
						<p:column sortBy="#{entity.nombre}" width="30%">
							<f:facet name="header">
								<h:outputText value="Nombre" />
							</f:facet>
							<h:outputText value="#{entity.nombre}" />
						</p:column>
						<p:column width="30%">
							<f:facet name="header">
								<h:outputText value="Descripcion" />
							</f:facet>
							<h:outputText value="#{entity.descripcion}" />
						</p:column>
						<!-- Opciones -->
						<p:column width="10%">
							<f:facet name="header">
								<h:outputText value="Opciones" />
							</f:facet>
							<p:panelGrid columns="2" styleClass="ui-column-icon-16">
								<p:commandLink id="link_editar" actionListener="#{rolBean.edit}" oncomplete="if (openDialog(xhr, status, args)){$('#modalEdit').modal('show');}"
									update=":formMain:formEdit:outputPanelModal">
									<h:graphicImage value="../resources/images/actions/pencil.png" />
								</p:commandLink>
								<p:commandLink id="link_eliminar" actionListener="#{rolBean.delete}" oncomplete="if (openDialog(xhr, status, args)){PF('dlgDelete').show();}"
									update=":formMain:dlgDelete">
									<h:graphicImage value="../resources/images/actions/remove.png" />
								</p:commandLink>
							</p:panelGrid>
						</p:column>
					</p:dataTable>
				</p:outputPanel>

				<br />

				<p:commandLink name="btnAdd" actionListener="#{rolBean.add}" value="Agregar Rol"
					oncomplete="if (openDialog(xhr, status, args)){$('#modalEdit').modal('show');}" update="messages, :formMain:formEdit:outputPanelModal"
					styleClass="btn btn-default btn-primary" />

				<!-- Inicio Modal Add/Edit-->
				<div class="modal fade" id="modalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<h:form id="formEdit">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header modal-header-primary">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
									<h4 class="modal-title">Nuevo Rol</h4>
								</div>
								<div class="modal-body toggle-heading">
									<p:outputPanel id="outputPanelModal" columns="1" styleClass="modal-body ui-panel-no-border">
										<h:inputHidden value="#{rolBean.entity.id}" />
										<p:messages id="messagesEdit" showDetail="true" autoUpdate="false" closable="true" />
										<div class="position-center">

											<div class="form-group">
												<label>Aplicación</label>
												<h:selectOneMenu id="somAplicacion" value="#{rolBean.entity.aplicacionDTO.selected}" styleClass="form-control m-bot15" disabled="#{!rolBean.actionAdd}">
													<f:selectItem itemLabel="-Seleccione-" itemValue="" />
													<f:selectItems value="#{rolBean.aplicacionSIL}" />
												</h:selectOneMenu>
											</div>
											<div class="form-group">
												<label>Nombre</label>
												<h:inputText maxlength="50" size="50" value="#{rolBean.entity.nombre}" class="form-control" style="text-transform: uppercase"
													onblur="this.value=this.value.toUpperCase();" disabled="#{!rolBean.actionAdd}" />
											</div>
											<div class="form-group">
												<label>Descripción</label>
												<h:inputText maxlength="255" size="50" value="#{rolBean.entity.descripcion}" class="form-control" />
											</div>
											<div class="form-group">
												<label>Vigencia desde</label>
												<h:inputText size="50" value="#{rolBean.entity.vigencia.fechaDesdeFormat}" class="form-control" disabled="true"/>
											</div>
											<div class="form-group">
												<label>Vigencia hasta</label>
												<h:inputText size="50" value="#{rolBean.entity.vigencia.fechaHastaFormat}" class="form-control" disabled="true"/>
											</div>
										</div>
									</p:outputPanel>
								</div>
								<div class="modal-footer modal-footer-ext">
									<p:commandLink value="Confirmar" actionListener="#{rolBean.save}" styleClass="btn btn-success"
										oncomplete="if (closeDialog(xhr, status, args)){$('#modalEdit').modal('hide');}" update=":formMain:entityListDT, messagesEdit, outputPanelModal" />
									<p:commandLink value="cancelar" actionListener="#{rolBean.cancel}" styleClass="btn btn-default" onsuccess="$('#modalEdit').modal('hide');"
										update="messagesEdit" />
								</div>
							</div>
						</div>
					</h:form>
				</div>
				<!-- Fin Modal Add/Edit-->

				<!-- Inicio Modal Delete-->
				<p:confirmDialog id="dlgDelete" message="¿Esta seguro de eliminar el rol '#{rolBean.entityDeleteMessage}'?" header="Eliminar Rol" widgetVar="dlgDelete"
					severity="alert" closeOnEscape="true" showEffect="true" style="top:50% !important; left:50% !important;">
					<p:commandLink name="btnDelete" actionListener="#{rolBean.delete}" oncomplete="PF('dlgDelete').hide();" update="messages,entityListDT"
						styleClass="btn btn-default btn-success" value="Eliminar" />
					<button type="button" class="btn btn-default" onclick="PF('dlgDelete').hide();">Cancelar</button>
				</p:confirmDialog>
				<!-- Fin Modal Delete-->

			</div>
			</section>
		</h:form>

	</ui:define>
</ui:composition>